<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工最高工资查询</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 20px;
            background: linear-gradient(135deg, rgba(75, 175, 255, 0.8), rgba(255, 125, 120, 0.8)), url('background.jpg') no-repeat center center/cover;
            backdrop-filter: blur(10px);
            background-attachment: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        .container {
            background-color: rgba(255, 255, 255, 0.7);
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            max-width: 1200px;
            width: 100%;
        }
        #chart {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
<div class="container">
    <h2 class="text-center">根据员工等级查询最高工资员工</h2>
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="input-group mb-3">
                <input type="number" class="form-control" id="employeeLevel" placeholder="请输入员工等级" min="1">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="button" onclick="fetchData()">查询</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 用于展示图表的容器 -->
    <div id="chart"></div>
</div>

<script>
    function fetchData() {
        const level = document.getElementById('employeeLevel').value;
        if (!level) {
            alert('请输入员工等级');
            return;
        }

        fetch(`http://localhost:8089/employee/getsalaryoflevel/${level}`)
            .then(response => response.json())
            .then(data => {
                if (data.code === 1 && data.data.length > 0) {
                    renderChart(data.data);
                } else {
                    alert(data.msg || '没有找到相关数据');
                    renderChart([]);
                }
            })
            .catch(error => {
                console.error('Error fetching data:', error);
                alert('获取数据时出错');
                renderChart([]);
            });
    }

    function renderChart(data) {
        const chartDom = document.getElementById('chart');
        const myChart = echarts.init(chartDom);

        const option = {
            title: {
                text: '最高工资员工信息',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            xAxis: {
                type: 'category',
                data: data.map(item => item.employeeName)
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '工资',
                    type: 'bar',
                    data: data.map(item => item.salary)
                }
            ]
        };

        myChart.setOption(option);
    }
</script>
</body>
</html>
